/*****
 * 选择店铺标签Input
 */
import { useEffect, useMemo, useState, useRef } from "react";
import { Input } from "antd";
import SelectShop from "@/components/SelectShop";
import IconFont from "@/components/IconFont";

const SelectShopInput = props => {
	const { handleOk, value, ...reset } = props;

	const [selectShops, setSelectShops] = useState([]); //选择的店铺
	const [shopVisible, setShopVisible] = useState(false); // 店铺弹窗

	//value展示中文
	const valueRender = useMemo(() => {
		if (value) {
			return selectShops.map(item => (item.systemStoreName ? item.systemStoreName : item.storeName)).join(",");
		} else {
			return "";
		}
	}, [value, selectShops]);

	useEffect(() => {
		if (selectShops.length) {
			handleOk(selectShops.map(item => item.id).join(","));
		} else {
			handleOk("");
		}
	}, [selectShops]);

	//清除店铺/标签弹窗
	const handleClear = e => {
		const val = e.target.value;
		if (val == "") {
			setSelectShops([]);
		}
	};

	//店铺组件
	const SelectShopProps = {
		selectShops: selectShops.map(item => item.id),
		handleCancel() {
			setShopVisible(false);
		},
		handleOk(arr) {
			setShopVisible(false);
			setSelectShops(arr);
		}
	};

	return (
		<div>
			<Input
				{...reset}
				allowClear
				onChange={e => handleClear(e)}
				onClick={() => setShopVisible(true)}
				placeholder="请选择店铺"
				suffix={<IconFont onClick={() => setShopVisible(true)} style={{ cursor: "pointer" }} type="iconmodal-input" />}
				value={valueRender}
			/>
			{shopVisible && <SelectShop {...SelectShopProps} />}
		</div>
	);
};

export default SelectShopInput;
